<div class="comment_container">
  <div class="row">
    <div class="form-item col-md-3">
      <label for="">审核状态</label>
      <select name="parentId" id="" class="user_search_text">
        <!-- 遍历生成 -->
        <option value="" class="val" >请选择</option>
        <option value="" class="val" >审核通过</option>
        <option value="" class="val" >未审核</option>
        <option value="" class="val" >审核未通过</option>
      </select>   
    </div>
    <div class="form-item col-md-3">
      <label for="">关键字</label>
      <input type="text" name="no" class="user_search_text">
      <button type="button" class="btn btn-link">搜索</button>
    </div>    
  </div>
  <div class="row">
    <table class="table table-bordered table-hover">
      <thead >  
        <th>序号</th>
        <th>评论内容</th>
        <th>评论日期</th>
        <th>状态</th>
        <th>操作</th>
      </thead>
      <tbody>
        
      </tbody>
      
    </table>
  </div>
</div>
<style>
    .comment_container select,.comment_container input{  
      height: 32px;
      line-height: 32px;
      border-radius: 4px;
      border: 1px solid #dcdfe6;
    }
    .comment_container select{
      width: 120px;
    }
    label{
    color: #666;
    font-size: 16px;
  }
  .comment_container .current{
    background-color: #fff8e6;
    border-color: #fff1cc;
    color: #ffba00;
    height: 20px;
    padding: 0 5px;
    line-height: 19px;
  }
  .comment_container .pass,.comment_container .nopass{
    color: #c0c4cc;
    cursor: not-allowed;
  }
  .comment_container .deleteById{
    color: #2cb5ac;
  }
</style>
<script>
  //声明全局变量
  var baseUrl='http://47.94.229.139:7788/';
  var currentPage=1;
	var pageSize=10;
  //通过promise封装请求函数
  function getData(type,url){
    var p=new Promise((resolve,reject)=>{
      //执行异步请求
      $.ajax({
        url:url,
        type:type,
        headers:{
          "Authorization":sessionStorage.getItem('token'),
        },
        success:function(data){
          resolve(data);
        }
      })
    })
    return p;
  }
  function getcommentData(url){
    return  getData("get",baseUrl+url).then(function(data){
        console.log(data);
        data.data.list.forEach((item)=>{
          $(".comment_container tbody").append(`<tr style="text-align: left;">
            <td >`+item.id+`</td>
            <td>`+item.content+`</td>  
            <td>`+item.commentTime+`</td>
            <td >
              <span class='current'> `+item.status+`<span>
            </td>  
            <td>
                <span class="deleteById">删除</span>
                <span class="pass">通过</span> 
                <span class='nopass'>不通过</span> 
            </td>
            </tr>`);      
          }); 
        })
  }
  getcommentData("comment/pageQuery?page=1&pageSize=10")
  //给搜索按钮绑定事件
  $(".btn-link").click(()=>{
  //1.获取用户数据
  //var status=$(".user_search_text").eq(0).val();
  var keywords=$(".user_search_text").eq(1).val();
  //console.log(status,keywords)
  //2.判断用户输入
  if(keywords==''){
    url="comment/pageQuery?page=1&pageSize=10";
  }else {
    url="comment/pageQuery?page=1&pageSize=10&keywords="+keywords;
  }
  //3.发送请求
  $("tbody").empty();
    getcommentData(url);
  });
  //给删除按钮绑定事件
  $('.comment_container tbody').on('click','.deleteById',(event)=>{
    id=$(event.target).parent().parent().children().eq(0).text();
    console.log(id);
    //删除当前行
    if (confirm("是否确定删除当前行")){
      getData('get',baseUrl+'comment/deleteById?id='+id).then((res)=>{
        alert('删除成功');      
        //清空所有tr
        $("tbody").empty();
        //3.刷新页面
        getcommentData('comment/pageQuery?page=1&pageSize=10');  
      })
    }  
  })   
</script>
